<!--  -->
<template>
  <div>
      <mt-header title="登录">
    <router-link  to="/"  slot="left">
      <mt-button icon="back"></mt-button>
    </router-link>
    <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <div class="img">
        <img src="../assets/img/shop.png" alt="">
      </div>
      <div class="user-login">
        <mt-field label="用户名" placeholder="用户名" v-model="Username" :state="state1"></mt-field>
      <mt-field label="密码" placeholder="密码" type="password" v-model="password" :state="state2"></mt-field>
      <div class="tet">
          <mt-field label="验证码" placeholder="请输入验证码" v-model="yzm"></mt-field>
          <div class="s-canvas" @click="createdCode">
          <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
        </div>
      </div>
      <div>
    </div>
      </div>
      <div class="button">
          <router-link to="/UserRegist">立即注册</router-link>
          <div class="anniu" @click="UserLogin()">
              <p>登录</p>
          </div>
      </div>
      
  </div>
  </template>
  
  
  <script>
  import Vue from 'vue'
  import { Toast } from 'mint-ui';
  export default Vue.extend({
    props: {
      fontSizeMin: {
        type: Number,
        default: 25
      },
      fontSizeMax: {
        type: Number,
        default: 30
      },
      backgroundColorMin: {
        type: Number,
        default: 255
      },
      backgroundColorMax: {
        type: Number,
        default: 255
      },
      colorMin: {
        type: Number,
        default: 0
      },
      colorMax: {
        type: Number,
        default: 160
      },
      lineColorMin: {
        type: Number,
        default: 100
      },
      lineColorMax: {
        type: Number,
        default: 255
      },
      dotColorMin: {
        type: Number,
        default: 0
      },
      dotColorMax: {
        type: Number,
        default: 255
      },
      contentWidth: {
        type: Number,
        default: 120
      },
      contentHeight: {
        type: Number,
        default: 34
      }
    },
    data () {
      return {
        identifyCode: '',
        Username:"",
        password:"",
        yzm:"",
        toastInstanse:null,
        state1:"",
        state2:"",
      }
    },
    mounted () {
      this.createdCode()
    },
    watch: {  
        Username() {
          if(this.Username.length<8){
            this.state1="error"
          }else{
            this.state1="success"
          }
         },
        password() {
          if(this.password.length<8){
            this.state2="error"
          }else{
            this.state2="success"
          }
         },
     deep: true
    
   },
    methods: {
      UserLogin(){
        // console.log(this.Username.length)
        // 判断是否为空 判断是否格式错误
        if(this.Username!==""&this.password!==""&this.yzm!==""){
          if(this.state1=="success"&this.state2=="success"){
            var a=1
          }else{
            this.err("用户名或密码格式错误")
            console.log(this.state1,this.state2)
          }
        }else{
          this.err("请输入内容")
        }
         
        // 判断验证码是否正确
        if(a==1){
          if(this.identifyCode==this.yzm){
              // console.log(2)
              var url=`/login?UserName=${this.Username}&password=${this.password}`
          this.axios.post(url).then(res=>{
                console.log("我的",res)
                if(res.data.code==200){
                    this.err("登录成功")
                    let userInfo={
                            isLogin: true,
                            uname:this.Username,
                            upwd:this.password,
                            uid:res.data.results[0].uid
                        }
                        // 将登录状态存储到state中
                        this.$store.state.userInfo=userInfo
                        // 将登录状态存储到localStorage中
                        localStorage.setItem("userInfo",JSON.stringify(userInfo));

                    // // 注册成功跳转到登录页面
                    this.$router.push({
                        path:"/MyHome"
                    })
                }

                if(res.data.code==201){
                  this.err("该用户还未注册")
                }
                if(res.data.code==202){
                  this.err("密码错误，请检查密码")
                }
            })         
          }else{
              console.log(1)
              this.err("验证码错误") 
          }
        }
       
      },
      err(a){
          this.toastInstanse=Toast(a);
      },
      // 生成4个随机数
      createdCode () {
        const len = 4
        const codeList = []
        const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
        const charsLen = chars.length
        for (let i = 0; i < len; i++) {
          codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)))
        }
        this.identifyCode = codeList.join('')
        this.$emit('getIdentifyCode', this.identifyCode.toLowerCase())
        this.drawPic()
      },
   
      // 生成一个随机数
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 生成一个随机的颜色
      randomColor (min, max) {
        const r = this.randomNum(min, max)
        const g = this.randomNum(min, max)
        const b = this.randomNum(min, max)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
      },
   
      drawPic () {
        const canvas = document.getElementById('s-canvas')
        const ctx = canvas.getContext('2d')
        ctx.textBaseline = 'bottom'
        // 绘制背景
        ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
        ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
        // 绘制文字
        for (let i = 0; i < this.identifyCode.length; i++) {
          this.drawText(ctx, this.identifyCode[i], i)
        }
        this.drawLine(ctx)
        this.drawDot(ctx)
      },
   
      drawText (ctx, txt, i) {
        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
        ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
        const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
        const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
        var deg = this.randomNum(-45, 45)
        // 修改坐标原点和旋转角度
        ctx.translate(x, y)
        ctx.rotate(deg * Math.PI / 180)
        ctx.fillText(txt, 0, 0)
        // 恢复坐标原点和旋转角度
        ctx.rotate(-deg * Math.PI / 180)
        ctx.translate(-x, -y)
        console.log(this.identifyCode)
      },
   
      // 绘制干扰线
      drawLine (ctx) {
        for (let i = 0; i < 5; i++) {
          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
          ctx.beginPath()
          ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
          ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
          ctx.stroke()
        }
      },
   
      // 绘制干扰点
      drawDot (ctx) {
        for (let i = 0; i < 80; i++) {
          ctx.fillStyle = this.randomColor(0, 255)
          ctx.beginPath()
          ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
          ctx.fill()
        }
      }
    }
  })
  </script>
  <style scoped>
  /* @import url(); 引入css类 */
  .mint-header{
      color: black;
      background-color: white;
      font-size: 10px;
  }
  .img{
    text-align: center;
    margin: 20px 0;
  }
  .img img{
    margin-top: 50px;
    width: 35%;
    height: 35%;
  }
  .tet{
      position: absolute;
      width: 100%;
  }
  .s-canvas {
    height: 38px;
    cursor: pointer;
    position: relative;
    top: -38px;
    float: right;
  }
  .s-canvas canvas{
    margin-top: 1px;
    margin-left: 8px;
  }
  
  .user-login{
      margin-bottom: 75px;
  }
  .button{
      margin: 0 10px;
      margin-top: 0px;
  }
  .button a{
      text-decoration: none;
      color: #1989fa;
      font-size: 10px;
      margin-top: 55px;
  }
  .button .anniu{
      margin: 15px 10%;
  }
  .button .anniu p{
      background-color: rgb(27, 174, 174);
      color: white;
      width: 100%;
      text-align: center;
      font-size: 10px;
      border-radius: 20px;
      line-height: 40px;
      margin-top: 15px;
  }
  </style>